<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>系统概览</span>
      </div>
    </template>
    
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value">{{ stats.userCount }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value">{{ stats.activeUserCount }}</div>
            <div class="stat-label">活跃用户</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value">{{ stats.todayLoginCount }}</div>
            <div class="stat-label">今日登录</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value">{{ stats.onlineUserCount }}</div>
            <div class="stat-label">在线用户</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card style="margin-bottom: 20px">
      <template #header>
        <span>最近活动</span>
      </template>
      <el-table :data="activities" border style="width: 100%">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="user" label="用户" width="120" />
        <el-table-column prop="action" label="操作" />
        <el-table-column prop="ip" label="IP地址" width="150" />
      </el-table>
    </el-card>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const stats = ref({
  userCount: 128,
  activeUserCount: 96,
  todayLoginCount: 42,
  onlineUserCount: 18
})

const activities = ref([
  {
    time: '2023-05-01 14:30:22',
    user: 'admin',
    action: '登录系统',
    ip: '192.168.1.100'
  },
  {
    time: '2023-05-01 14:25:10',
    user: 'user1',
    action: '修改个人信息',
    ip: '192.168.1.101'
  },
  {
    time: '2023-05-01 13:45:33',
    user: 'user2',
    action: '查看用户列表',
    ip: '192.168.1.102'
  },
  {
    time: '2023-05-01 12:10:45',
    user: 'admin',
    action: '删除用户',
    ip: '192.168.1.100'
  }
])

onMounted(() => {
  // 可以在这里从后端获取统计数据
})
</script>

<style scoped>
.stat-card {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>